<template>
  <div class="container">
    <el-dialog title="预览文章" :visible="showArticle" @close="btnCancel">
      <div class="mainBody">
        <h2 class="title">{{ articleDetail.title }}</h2>
        <div class="center">
          <span> {{ articleDetail.createTime | parseTimeByString }} </span>
          <span> {{ articleDetail.creator }}</span>
          <span><i class="el-icon-view"></i> {{ articleDetail.visits }}</span>
        </div>
        <div class="articleContent" v-html="articleDetail.articleBody">
          <!-- {{ articleDetail.articleBody }} -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/articles.js";
export default {
  props: {
    showArticle: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      articleDetail: {},
    };
  },
  methods: {
    // 预览
    async btnLook(row) {
      const { data } = await detail(row);
      this.articleDetail = data;
      this.showArticle = true;
    },
    btnCancel() {
      this.$emit("update:showArticle", false);
    },
  },
};
</script>

<style scoped lang='scss'>
// 方案一： 不加 scoped 去掉 >>>
>>> img {
  width: 100% !important;
}
</style>
